<template>
  <view class="container">
    <!-- 顶部面板 -->
    <view class="top--panel">
      <view style="background-color: #f1f1f1; display: flex; font-size: 28rpx; padding: 10px 0; color: #181818;">
        <view class="scale-banner">
          <text class="text-content">全部家具</text>
          <text class="text-content1">最新</text>
          <text class="text-content2">最热</text>
          <text class="text-content3">共6个测评</text>
        </view>
      </view>
    </view>
    <!-- 滚动区域 -->
    <view class="scroll-panel" id="scroll-panel">
      <view class="list-box">
        <view class="left">
          <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" :scroll-into-view="leftIntoView">
            <view class="item" v-for="(item, index) in leftArray" :key="index" :class="{ active: index === leftIndex }"
              :id="'left-' + index" :data-index="index" @tap="leftTap(index)">
              {{ item }}
            </view>
          </scroll-view>
        </view>
        <view class="main">
          <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
            :scroll-into-view="scrollInto" scroll-with-animation="true">
            <view class="item main-item" v-for="(item, index) in mainArray" :key="index" :id="'item-' + index">
              <view class="title">
                <view>{{ item.title }}</view>
              </view>
              <view class="goods" v-for="(item2, index2) in item.list" :key="index2">
                <image src="/static/logo.png" mode=""></image>
                <view>
                  <view>第{{ index2 + 1 }}个家具标题</view>
                  <view class="describe">第{{ index2 + 1 }}个家具的描述内容</view>
                  <view class="money">第{{ index2 + 1 }}个家具的操作</view>
                </view>
              </view>
            </view>
            <view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    ref,
    onMounted,
    nextTick,
    computed
  } from 'vue';

  export default {
    setup() {
      const scrollHeight = ref(400);
      const scrollTopSize = ref(0);
      const fillHeight = ref(0);
      const leftArray = ref([]);
      const mainArray = ref([]);
      const topArr = ref([]);
      const leftIndex = ref(0);
      const scrollInto = ref('');

      // Computed property
      const leftIntoView = computed(() => `left-${leftIndex.value > 3 ? leftIndex.value - 3 : 0}`);

      // Mounted lifecycle hook
      onMounted(() => {
        nextTick(() => {
          setTimeout(() => {
            initScrollView().then(() => {
              getListData();
            });
          }, 200);
        });
      });

      // Methods
      const initScrollView = () => {
        return new Promise((resolve) => {
          const query = wx.createSelectorQuery();
          query.select('#scroll-panel').boundingClientRect(rect => {
            scrollTopSize.value = rect.top;
            scrollHeight.value = rect.height;
          }).exec(() => {
            resolve();
          });
        });
      };
      // const initScrollView = () => {
      //   return new Promise((resolve) => {
      //     const view = document.querySelector('#scroll-panel');
      //     const rect = view.getBoundingClientRect();
      //     scrollTopSize.value = rect.top;
      //     scrollHeight.value = rect.height;
      //     nextTick(() => {
      //       resolve();
      //     });
      //   });
      // };

      const getListData = () => {
        return new Promise((resolve) => {
          // 模拟数据获取
          setTimeout(() => {
            const [left, main] = [
              [],
              []
            ];

            for (let i = 0; i < 5; i++) {
              left.push(`${i + 1}类家具`);

              const list = [];
              let r = Math.floor(Math.random() * 10);
              r = r < 1 ? 3 : r;
              for (let j = 0; j < r; j++) {
                list.push(j);
              }
              main.push({
                title: `第${i + 1}类家具标题`,
                list,
              });
            }

            resolve({
              left,
              main,
            });
          }, 1000);
        }).then((res) => {
          console.log('-----------请求接口返回数据示例-------------');
          console.log(res);

          leftArray.value = res.left;
          mainArray.value = res.main;

          nextTick(() => {
            getElementTop();
          });
        });
      };

      const getElementTop = () => {
        return new Promise((resolve) => {
          const elements = document.querySelectorAll('.main-item');
          const data = Array.from(elements).map((item) => ({
            top: item.getBoundingClientRect().top - scrollTopSize.value,
          }));
          resolve(data);
        }).then((res) => {
          const topArrData = res.map((item) => item.top);
          topArr.value = topArrData;

          const last = res[res.length - 1].top;
          if (last - 20 < scrollHeight.value) {
            fillHeight.value = scrollHeight.value - last + 20;
          }
        });
      };

      const mainScroll = (e) => {
        const top = e.currentTarget.scrollTop;
        let index = 0;

        for (let i = topArr.value.length - 1; i >= 0; i--) {
          if (top + 2 >= topArr.value[i]) {
            index = i;
            break;
          }
        }

        leftIndex.value = index < 0 ? 0 : index;
      };

      const leftTap = (index) => {
        scrollInto.value = `item-${index}`;
      };

      return {
        scrollHeight,
        scrollTopSize,
        fillHeight,
        leftArray,
        mainArray,
        topArr,
        leftIndex,
        scrollInto,
        leftIntoView,
        initScrollView,
        getListData,
        getElementTop,
        mainScroll,
        leftTap,
      };
    },
  };
</script>

<style lang="scss">
  page,
  .container {
    height: 100%;
  }

  /* 容器 */
  .container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    &>view {
      width: 100%;
    }

    .scroll-panel {
      flex-grow: 1;
      height: 0;
      overflow: hidden;
    }

    .bottom-panel {
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  .scale-banner {
    // background-color: #ffaa7f;
  }

  .text-content {
    padding-left: 20rpx;
  }

  .text-content1 {
    padding-left: 80rpx;
    color: #9e9e9e;
  }

  .text-content2 {
    padding-left: 20rpx;
    color: #9e9e9e;
  }

  .text-content3 {
    padding-left: 200rpx;
    color: #9e9e9e;
  }

  .list-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    font-size: 28rpx;

    .left {
      width: 200rpx;
      background-color: #f6f6f6;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 32rpx;

      .item {
        padding-left: 20rpx;
        position: relative;

        &:not(:first-child) {
          margin-top: 1px;

          &::after {
            content: '';
            display: block;
            height: 0;
            border-top: #d6d6d6 solid 1px;
            width: 620upx;
            position: absolute;
            top: -1px;
            right: 0;
            transform: scaleY(0.5);
            /* 1px像素 */
          }
        }

        &.active {
          color: #42b983;
          background-color: #fff;
        }
      }

      .fill-last {
        height: 0;
        width: 100%;
        background: none;
      }
    }

    .main {
      background-color: #fff;
      padding-left: 20rpx;
      width: 0;
      flex-grow: 1;
      box-sizing: border-box;

      .title {
        line-height: 64rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666;
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 19;
      }

      .item {
        padding-bottom: 10rpx;
        border-bottom: #eee solid 1px;
      }

      .goods {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        margin-bottom: 10rpx;

        &>image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 16rpx;
          margin-left: 2px;
        }

        .describe {
          font-size: 24rpx;
          color: #999;
        }

        .money {
          font-size: 24rpx;
          color: #efba21;
        }
      }
    }
  }
</style>